<template>
<div>
    <Tree :data="data1" style="width:240px;float:left;height: 372px;padding: 15px; border: 1px rgb(204, 204, 204) solid;" @on-select-change="onselectchange"></Tree>
    <div style="position:relative;left:20px;marginBottom:10px;float:left;width:750px">
             <Button type="primary" @click="showmodel('formValidate')" style="marginRight:10px;">添加数据</Button>
             <Button type="error" @click="removes" style="marginRight:10px;">删除多个</Button>
             <Input v-model="value"  style="width: 100px;marginRight:10px;" />
            <Button type="primary" icon="ios-search" @click="search" style="marginRight:10px;">查询数据</Button>
         <Modal
            v-model="modal1"
            title="数据操作"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

        <FormItem label="用户名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入用户名"></Input>
        </FormItem>

        <FormItem label="标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入信息标题"></Input>
        </FormItem>
         <!-- <FormItem label="信息内容" prop="content">
            <Input v-model="formValidate.content" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入信息内容..."></Input>
        </FormItem> -->
        <FormItem label="内容" prop="content">
            <quill-editor v-model="formValidate.content"
                 ref="myQuillEditor"
                :options="editorOption"

            ></quill-editor>
    </FormItem>

         <FormItem label="发布时间" prop="time">
            <DatePicker type="date" placeholder="选择日期" v-model="formValidate.time"></DatePicker>
         </FormItem>

        <!-- <FormItem label="发布时间" prop="time">
            <Input v-model="formValidate.time" placeholder="请输入发布时间"></Input>
        </FormItem> -->
        <FormItem label="分类" prop="cate">
            <Input v-model="formValidate.cate"></Input>
        </FormItem>
        <FormItem label="关键字" prop="keyword">
            <Input v-model="formValidate.keyword"></Input>
        </FormItem>
        <FormItem label="点赞数" prop="like">
            <Input v-model="formValidate.like"></Input>
        </FormItem>
        <FormItem label="评论数" prop="commentsnum">
            <Input v-model="formValidate.commentsnum"></Input>
        </FormItem>
         <FormItem>
             <Button type="primary" @click="handleSubmit('formValidate')">提交 </Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            <!-- 两个点击事件 -->
        </FormItem>
    </Form>
        <div slot="footer">
                 <!-- <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button> -->
            不显示按钮
        </div>
        </Modal>
    <Table border :columns="columns" :data="data" @on-selection-change="onSelect" style="marginBottom:20px;marginTop:20px; width: 730px;"></Table>
      <Page :page-size='rows' :page-size-opts='[5,10,15,20]' :total="total" show-sizer @on-change='onchangepage' @on-page-size-change='onpagesizechange'/>
    </div>
</div>
</template>
<script>
    //引入moment.js
    import moment from 'moment';
    import VueQuillEditor from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
	import {mapActions} from 'vuex'
    export default {
        data () {
            return {
            	myUrl:this.GLO.myUrl,
            	data1:[],
                columns: [
                     {
                    type : 'selection',
                    width: 100,
                    align: 'center',
                    fixed:'left'

                    },
                    {
                        title: '用户名',
                        key: 'name',
                        width:110,
                        align:'center'

                    },
                    {
                        title: '标题 ',
                        key: 'title',
                        width:130,
                        align:'center'
                    },
                    {
                        title: '内容',
                        key: 'content',
                        width:150,
                        align:'center',
                        ellipsis:true,
                    //     render: function(h,params){
                    //     return h('div',{

                    //     'class':'qiangge'
                    //     });
                    // }
                    render: function(h,params){
                        return h('div',{
                            domProps:{
                            innerHTML: params.row.content
                        },
                        'class':'hidden'

                        });
                    }
                    },
                    {
                        title: '发布时间',
                        key: 'time',
                        width:150,
//                      align:'center',
                        render: function(h, params) {
                            return h(
                            'div',
                            moment(params.row.time).format('YYYY-MM-DD')
                            );
                        }
                    },
                    {
                        title: '分类',
                        key: 'cate',
                        width:100,
                        align:'center',

                    },
                    {
                        title: '关键字',
                        key: 'keyword',
                        width:100,
                        align:'center'

                    },
                    {
                        title: '点赞数',
                        key: 'like',
                        width:100,
                        align:'center'
                    },
                     {
                        title: '评论数',
                        key: 'commentsnum',
                        width:100,
                        align:'center'
                    },
                    {
                        title: '评论',
                        key: 'comments',
                        width:100,
                        align:'center',
                        render:(h,params,data)=>{
                            return h('div',[
                                 h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '50px',
                                 },
                                 on:{
                                     click:()=>{
                                     	console.log(params.row._id);
                                     	this.axios({
							                    url:`${this.myUrl}news/data/${params.row._id}`,
							                    method:'get'
							                }).then(res=>{
							                  console.log(res.data.content);
												this.$router.push({path:'/comment'});
	                                         this.$store.dispatch('settype',3);
	                                         this.$store.dispatch('setcontent',res.data.content);
	                                         this.$store.dispatch('settitle',res.data.title);
	                                         this.$store.dispatch('setid',res.data._id);
							                })
                                    }
                                 }

                                },'评论'),
                            ])
                        }

                    },

                    {
                        title: '操作',
                        key: 'operation',
                        width: 150,
                        align:'center',
                         fixed:'right',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {//修改
                                            this.edit(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)//找到id
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                total:0,
                rows:5,
                page:1,
                modal1:false,
                ids:[],
                value:'',
                 editorOption: {

        },
                treetitle:'',

                formValidate: {
                    name: '',
                    title: '',
                    content: '',
                    time: '',
                    cate:'',
                    keyword: '',
                    like: '',
                    commentsnum: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '标题不能为空' },
                                          ],

                    content: [
                        { required: true, message: '请输入发布信息', trigger: 'blur' },
                        { type: 'string', min: 20, message: '发布的内容不能少于20字', trigger: 'blur' }
                    ],
                    cate: [
                        { required: true, message: '分类不能为空', trigger: 'blur' }
                    ],
                    keyword: [
                        { required: true, message: '关键字不能为空', trigger: 'blur' }
                    ],
                    // like: [
                    //     { required: true, message: '点赞数不能为空', trigger: 'blur' }
                    // ],
                    // commentsnum: [
                    //     { required: true, message: '评论数不能为空', trigger: 'blur' }
                    // ],
                }

            }
        },
        methods: {
            edit (id) {
               // console.log(id)
                //请求数据
                this.axios({
                    url:`${this.myUrl}news/data/${id}`,
                    method:'get'
                }).then(res=>{
                    //console.log(res.data)
                 //打开模态框
                 this.formValidate=res.data
                 //console.log(this.formValidate)
                 this.modal1=true

                })

            },
            remove (id) {//将id传过去
                  this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>您确定要删除吗?</p>',
                    onOk: () => {//确认删除
                        this.axios({
                             url:`${this.myUrl}news/data/${id}`,
                            method:'delete',
                            }).then(res=>{
                          this.getdate()
                        })
                    },
                    onCancel: () => {//取消删除
                        this.$Message.info('取消删除');
                    }
                });

            },
            //请求列表数据
            getdate(){
                this.axios({
                    url:this.myUrl+'news/list',
                    method:'post',
                    data:{
                        page:this.page,
                        rows:this.rows
                    }
                }).then(res=>{
                    //赋值
                    //console.log(res.data)
                    this.total=res.data.total//数据总数
                    this.data=res.data.rows;
                    setTimeout(()=>{
                        var listarr=document.querySelectorAll('.hidden p')
                        for(var i=0;i<listarr.length;i++){
                            listarr[i].style.cssText='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;';
                            $(listarr[i]).find('img').css({display:'none'});
                        }
                    },100)
                })
            },
            onchangepage(page){
               this.page=page,
               this.getdate()
            },
            onpagesizechange(rows){
                 this.rows=rows,
                 this.getdate()

            },
            ok () {
                this.$Message.info('操作成功');
            },
            cancel () {
                this.$Message.info('取消操作');
            },
             handleSubmit (name) {//点击sumbit按钮

                this.$refs[name].validate((valid) => {
                    if (valid) {//表单验证成功
                    console.log(this.formValidate)
                        if(this.formValidate._id){//这是修改
                             this.axios({
                                url:`${this.myUrl}news/data/${this.formValidate._id}`,
                                method:'put',
                                data: this.formValidate
                                }).then(res=>{
                                this.modal1=false,
                                this.getdate();
                                this.$Message.success('操作成功');
                            })

                        }else{
                             this.axios({//这是添加
                                url:this.myUrl+'news/data',
                                method:'post',
                                data: this.formValidate
                                }).then(res=>{
                                this.modal1=false,
                                this.getdate();
                                this.$Message.success('操作成功');
                                console.log(this.formValidate.content);
                                console.log(document.querySelectorAll('.qiangge'));
                                setTimeout(()=>{
                                    var qiangge=document.querySelectorAll('.qiangge');
                                    qiangge[qiangge.length-1].innerHTML=this.formValidate.content;
                                },200)


                            })
                        }
                     } else {//表单验证失败
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {//重置
                this.$refs[name].resetFields();
            },
            showmodel(name){
                this.modal1=true;
                this.$refs[name].resetFields();
            },
            onSelect(selection){
                var ids=[]
                for(var i=0;i<selection.length;i++){
               ids.push(selection[i]._id)
                }
                //赋值
                this.ids=ids.toString()
                //console.log(ids)
            },
             removes (ids) {//将ids传过去
                  this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>您确定要删除吗?</p>',
                    onOk: () => {//确认删除
                   // console.log(this.ids)
                        this.axios({
                             url:this.myUrl+'news/data/removes',
                            method:'post',
                            data:{
                                ids:this.ids
                            }
                            }).then(res=>{
                                this.getdate()
                  ir9      })
                    },
                    onCancel: () => {//取消删除
                        this.$Message.info('取消删除');
                    }
                });

            },
            search(){
                this.axios({
                    url:this.myUrl+'news/list',
                    method:'post',
                    data:{
                        dimtitle:this.value
                    }
                }).then(res=>{
                  this.data=res.data.rows
                })
            },
            onselectchange(node){ //选中分类节点，出现对应新闻
                 if(node.length>0){
                    this.treetitle=node[0].title;//自己
                    var arr=[];
                    function getText(obj){
                    arr.push(obj.title);
                    if(obj.children){
                        for(let i=0;i<obj.children.length;i++){
                        getText(obj.children[i]);
                        }
                    }
                }


                    getText(node[0]);
                    this.axios({
	                    url:this.myUrl+'news/list',
	                   method:'post',
                    data:{
                        dimcate:arr.toString()
                    }
                    }).then(res=>{
                    this.data=res.data.rows;
                    setTimeout(()=>{
                        console.log(document.querySelectorAll('.hidden p'))
                        var listarr=document.querySelectorAll('.hidden p')
                        for(var i=0;i<listarr.length;i++){
                            listarr[i].style.cssText='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'
//                      	$(listarr[i]).find('img').css({display:'none'});
                        }
                    },0)
                    })
                }else{
                    this.show=false;
                    this.getdate();
                    
                }
                },
                getTree(){
                	this.axios({
                		url:this.myUrl+'cate/list/2',
	                   	method:'post'
                	}).then(res=>{
                		this.data1=res.data;
                	})
                },
                ...mapActions['settype','setcontent','settitle']
        },
        
          computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
           },
        mounted() {
            this.getdate()
			this.getTree();
			console.log(this.myUrl)
        },
        filters:{
            moment:function(el){
            return  moment(el).format("YYYY-MM-DD HH:mm:ss")
            }
        }
    }
</script>
<style>
	.hidden p {overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
	.hidden p img{ display: none;}
</style>
